<template>
	<div id="priceGoods">
		<div class="search">
			<div class="type">
				<div class="left"><span>起止地点:</span></div>
				<div class="right my-flex-left address">

					<label class="check-label">
						<input type="checkbox" @click="types=[]" :checked="types.length==0" />
						<span>不限</span>
					</label>

					<div class="select-address my-flex-center">
						<div>请选择出发地</div>
						<img src="../../assets/wuliu/direction.png" alt="" />
						<div>请选择目的地</div>
					</div>
					<li class="confirm my-flex-center my-btn">确定</li>

				</div>
			</div>

			<div class="type">
				<div class="left"><span>起止地点:</span></div>
				<div class="right">
					<label class="check-label">
						<input type="checkbox" @click="types=[]" :checked="types.length==0" />
						<span>不限</span>
					</label>
					<label class="check-label" v-for="item in 16">
						<input type="checkbox" :value="item" v-model="types" />
						<span>不限{{item}}</span>
					</label>
				</div>
			</div>

		</div>
		<!--列表-->
		<div class="lists">
			<div class="search-condition">
				<li class="active hover">默认</li>
				<li class="hover">吨位</li>
				<li class="hover">发布时间</li>
			</div>

			<table cellspacing="" cellpadding="" class="my-table">
				<tr>
					<th>货主</th>
					<th>出发/到达</th>
					<th>价格</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item of 6">
					<td class="name">
						<div class="my-flex-center">
							<div class="img"></div>
							<div class="name1">
								<div>东明石化有限公司</div>
								<el-rate disabled text-color="#ff9900" :value="3.5" score-template="{value}">
								</el-rate>
							</div>
						</div>

					</td>
					<td class="arrive">
						<div class="my-flex-center">
							<span>南京市</span>
							<div class="my-flex-col-center">
								<span>汽油,30吨</span>
								<img src="../../assets/wuliu/arrow.png" alt="" />
								<span>装货日期:2019-04-18</span>
							</div>
							<span>衡阳市</span>
						</div>
					</td>
					<td class="price text-center">
						竞价
					</td>
					<td class="time text-center">
						一天前
					</td>
					<td class="operate text-center">
						<span class="hover" @click="changeRouter('goodsDetail')">查看详情</span>
					</td>
				</tr>
			</table>

			<!--分页-->
			<div class="page-change my-flex-center" v-if="tableData.length!=0">
				<div class="my-flex-center">
					<img src="../../assets/priceType/icon_left.png" @click="pageChange(params.pageNum-1)" />
					<span class="color-red">{{params.pageNum}}</span>
					<span> / {{Math.ceil(total/10)}}</span>
					<img src="../../assets/priceType/icon_right.png" @click="pageChange(params.pageNum+1)" />
					<span>跳转至第</span>
					<el-input-number size='mini' v-model="jumpPage" controls-position="right" :precision='0' :min="1" :max="Math.ceil(total/10)"></el-input-number>
					<span>页</span>
					<li class="jump bg-red my-btn" @click="pageChange(jumpPage)">跳转</li>
				</div>
			</div>
			<v-empty v-if="tableData.length==0"></v-empty>

		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import service from '@/js/services/price';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading','changeRouter'],
		data() {
			return {
				types: [],
				tableData:[1],
				total:10,
				jumpPage: 0,
				params:{
					pageNum:1,
					pageSize:10
				}
			}
		},
		created() {

		},
		mounted() {

		},
		activated() {

		},
		destroyed() {

		},
		filters: {

		},
		watch: {

		},
		methods: {
			...service,
			pageChange() {

			}
		}
	}
</script>

<style lang="less" scoped="scoped" src="../../less/page/goods/index.less"></style>